<template>
    <div class="notificationList">
        <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
            <el-breadcrumb-item>打款申请</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="notificationList-content">
            <label class="filterText">关键字</label>
            <el-input class="notificationList-input-filter" placeholder="请输入姓名/身份证号/手机号码/订单号" v-model="filter.keyword" icon="circle-cross" :on-icon-click="deleFilterText">
            </el-input>
            <label class="filterText">申请时间</label>
            <el-date-picker v-model="filter.time" type="daterange" placeholder="选择申请时间">
            </el-date-picker>
            <el-button class="filter-button-search" type="primary" icon="search" @click="search" :loading="this.loading">搜索</el-button>
            <p/>
            <el-table class="notificationList-table" :data="tableData" style="width: 100%" empty-text="暂无搜索结果" @selection-change="handleSelectionChange">
                <el-table-column prop="orderNo" label="订单编号" width="180">
                </el-table-column>
                <el-table-column prop="customerName" label="姓名" width="120">
                </el-table-column>
                <el-table-column prop="customerIdCard" label="身份证号" width="180">
                </el-table-column>
                <el-table-column prop="carModel" label="车型" width="120">
                </el-table-column>
                <el-table-column prop="loanBankName" label="贷款银行" :filters="$store.state.bank" :filter-method="filterbank" filter-placement="bottom-end" width="120">
                </el-table-column>
                <el-table-column prop="loanAmount" label="贷款金额" width="120">
                </el-table-column>
                <el-table-column prop="mobilePhone" label="联系电话" width="120">
                </el-table-column>
                <el-table-column prop="gmtCreate" label="申请时间" sortable width="180">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="130">
                    <template scope="scope">
                        <el-button type="text" size="small">
                            <router-link :to="{path:'/loanApplyDeal?orderNo='+scope.row.orderNo + '&annexBatchNo='+scope.row.annexBatchNo+'&customerIdCard='+scope.row.customerIdCard+'&orderStatus='+scope.row.orderStatus}">查看</router-link>
                        </el-button>
                        <el-button type="text" size="small" @click="apply(scope.row.orderNo,scope.row.bizChannel)" v-if="scope.row.orderStatus ==22||scope.row.orderStatus ==33">
                            申请打款
                        </el-button>
                        <el-button type="text" :disabled="true" size="small" v-if="scope.row.orderStatus == 31">
                            审核中
                        </el-button>
                        <el-button type="text" :disabled="true" size="small" v-if="scope.row.orderStatus == 32">
                            已打款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="notificationList-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="tablePage.page" :page-sizes="[10, 20, 30, 40]" :page-size="tablePage.num" layout="sizes, prev, pager, next" :page-count="tablePage.pager">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'notificationList',
    components: {},
    data() {
        return {
            filter: {
                time: [],
                keyword: '',
                loanBankName: '',
                salemanName: '', //业务员名称
                salemanNameList: [
                    { value: '名称1' },
                    { value: '名称2' }
                ],
            },
            tableData: [],
            multipleSelection: [],
            tablePage: {
                pager: 1, //总页数
                page: 1, //当前页数
                num: 10, //每页条数
            },
            loading: false,
        }
    },
    methods: {
        handleSelectionChange(val) {
            console.log(val.length);
            this.multipleSelection = val;
            if (val.length < 2) {
                this.buttonShow = false;
            } else {
                this.buttonShow = true;
            }


        },
        getSalemanNameList(queryString, cb) {
            cb(this.filter.salemanNameList);
        },
        filterbank(value, row) {
            this.filter.bank = value;
            return row.bank === this.$libs.jsonGetName(this.$store.state.bank, value);
        },
        filterTag(value, row) {
            this.filter.status = value;
            return row.status === this.$libs.jsonGetName(this.$store.state.orderStatus, value);
        },
        info(index, rows) {
            console.log(rows);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.tablePage.num = val;
            this.search();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.tablePage.page = val;
            this.search();
        },
        deleFilterText() {
            this.filter.keyword = '';
        },
        search() {
            this.loading=true;
            let param = {
                gmtCreateBegin: this.filter.time[0] ? this.$libs.formatDate(this.filter.time[0]) : '',
                gmtCreateEnd: this.filter.time[1] ? this.$libs.formatDate(this.filter.time[1]) : '',
                keyword: this.filter.keyword,
                pageNO: this.tablePage.page,
                pageSize: this.tablePage.num,
                orderStatusList:'22,31,32,33',
            };

            this.tableData = [];
            this.$http.get(this.$libs.getUrlSplit("/order/orders", param)).then((response) => {
                console.log(response);
                if (response.data.success) {
                    console.log(response.data.result);
                    let that = this;
                    that.tablePage.pager = parseInt(response.data.data.totalPage);
                    that.tablePage.num = parseInt(response.data.data.pageSize);
                    console.log(that.tablePage);
                    $.each(response.data.data.result, function(index, el) {
                            that.tableData.push({
                                orderNo: el.orderNo,
                                customerName: el.customerName,
                                customerIdCard: el.customerIdCard,
                                carModel: el.carModel,
                                loanBankName: el.loanBankName,
                                loanAmount: el.loanAmount,
                                mobilePhone: el.mobilePhone,
                                orderStatus: el.orderStatus,
                                gmtCreate: el.gmtCreate.substring(0, 10),
                                annexBatchNo: el.annexBatchNo,
                                customerId: el.customerId,
                                orderStatus: el.orderStatus,
                            })
                        
                    });
                }
                this.loading=false;
            }).catch((error) => {});
        },
        apply(orderNo, bizType) {
            let param = {
                "applyType": "2",
                "bizType": "1",
                "orderNo": orderNo,
                "remark": "打款申请"
            };
            this.$confirm('是否确认发起打款申请?', '打款申请确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post("/submitTaskController/salesManPayMentApply", param)
                    .then((response) => {
                        console.log(response);
                        if (response.data.success) {
                            const h = this.$createElement;
                            this.$msgbox({
                                title: '提交成功',
                                type: 'success',
                                message: h('p', null, [
                                    h('span', null, '打款申请提交成功，请在我的订单列表里了解最新状态！ '),
                                ]),
                                showCancelButton: false,
                                confirmButtonText: '确定'
                            });
                        } else {
                            this.$message.error(response.data.message);
                        }
                    }).catch((error) => {});
            });
        },
    },
    mounted() {
        this.search();
    }
}

</script>
<style lang="scss" scoped>
.notificationList {
    padding: 10px 16px;
    .breadcrumb {
        color: #99A9BF;
        font-size: 14px;
        line-height: 18px;
        margin: 8px 0px 10px 0px;
    }

    .title {
        color: #99A9BF;
        font-size: 14px;
        line-height: 18px;
        margin: 8px 0px 10px 0px;
    }
    .notificationList-content {
        background: #fff;
        position: fixed;
        top: 96px;
        bottom: 10px;
        left: 216px;
        right: 16px;
        overflow: auto;
        padding: 20px;
        .filterText {
            font-size: 14px;
            color: #475669;
            margin: 10px 5px 0px 30px;
        }
        .notificationList-hr {
            margin: 20px 0px 30px 0px;
            background: #D3DCE6;
        }
        .notificationList-input-selemanName {
            width: 190px;
            margin-bottom: 10px;
            .notificationList-input-name {
                width: 90px;
            }
        }
        .notificationList-input-filter {
            width: 285px;
        }
        .filter-button-search {
            margin-left: 30px;
        }
        .notificationList-table {
            margin: 20px 0px;
        }
        .notificationList-pagination {
            text-align: center;
        }
        a {
            color: #20a0ff;
        }
    }
}

</style>
